import {BrowserRouter,Route,Routes,NavLink,useRoutes,useLocation,Navigate,useNavigate,useParams,useSearchParams} from 'react-router-dom'
// BrowserRouter浏览器路由 Route单个 Routes路由容器  NavLink导航 useRoutes创建路由
// Navigate 跳转 ,useNavigate 编程跳转 ,useLocation 获取地址栏信息 ,useParams获取路由的参数 ,Outlet 子路由容器 ,useSearchParams获取查询参数
// 导入产品
import Produce from './views/Produce'
import Admin from './views/admin/Admin'
import Dash from './views/admin/Dash'
import Order from './views/admin/Order'
import Nomatch from './views/Nomatch'
import Login from './views/Login'
import Private from './views/Private'
// 根节点
function App() {
  return ( <BrowserRouter>
    <nav>
    <NavLink to=''>首页</NavLink> |
    <NavLink to='/about'>关于</NavLink> | 
    <NavLink to={{pathname:"/about",hash:"#best",search:"name=zeng"}} >关于-对象</NavLink> | 
  
    <NavLink to='/produce/abc'>产品abc</NavLink>   | 
    <NavLink to='/produce/def'>产品def</NavLink> |
    <NavLink to='/admin'>管理</NavLink>
    
    </nav>
    <RouterView></RouterView>

  </BrowserRouter> );
}

export default App;
function RouterView(){
  // 创建路由配置
  var routes = useRoutes([
    {path:"",element:<Home></Home>},
    {path:"/about",element:<About></About>},
    {path:"/login",element:<Login></Login>},
    {path:"/abc",element:<Navigate to="/about" state={{from:'/about'}}></Navigate>},
    {path:"produce/:id",element:<Produce></Produce>},
    {path:"/admin/*",element:<Private><Admin></Admin></Private>,children:[
      {path:"",element:<Dash></Dash>},
      {path:'dash',element:<Dash></Dash>},
      {path:'order',element:<Order></Order>}
    ]},
    {path:"*",element:<Nomatch></Nomatch>}

  ]);
  return <>{routes}</>
}

// 路由视图页面router.js
// function RouterView() {
//   return ( <Routes>
//     <Route path="" element={<Home></Home>}></Route>
//     <Route path="/about" element={<About></About>}></Route>
//     <Route path="/produce/:id" element={<Produce></Produce>}></Route>
//     <Route path="/admin/*" element={<Admin></Admin>}>
//       <Route path='' element={<Dash></Dash>}></Route>
//       <Route path='dash' element={<Dash></Dash>}></Route>
//       <Route path='order' element={<Order></Order>}></Route>
//     </Route>
//   </Routes> );
// }
// 首页 homne.js
function Home(){
  var navigate = useNavigate();
  return <div>
    <h1>首页内容</h1>
    <button onClick={()=>navigate(-1)}>返回</button>
    <button onClick={()=>navigate({pathname:"/about",search:"?name=zql"})}>跳转</button>
    </div>
}
// 关于about.js
function About(){
  var location   = useLocation();
    // 获取当页地址栏信息
  const [searchParams,setSearchParams] = useSearchParams();
  // 获取查询参数 setSearchParams设置查询参数 searchParams查询参数
  var name = searchParams.get("name");

  return <div>
    <h1>关于页面内容</h1>
    <p>{name}</p>
    {/* 显示查询参数 */}
    {JSON.stringify(location)}
  </div>
}

 